<template>
  <Dialog v-model="visible" title="退 款" width="64%">
    <form-create v-model="form" :rule="rule" :option="{ submitBtn: { show: false } }" />

    <template #footer>
      <el-button
        type="primary"
        :disabled="loading || form.refund < 0.01 || form.refund > totalAmount"
        >确 定</el-button
      >
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" name="PayOrderDetail" setup>
import * as Api from '@/api/userCenter/tradeOrder/tradeOrder'
import { formatDate } from '@/utils/formatTime'

const visible = ref(false) // 弹窗的是否展示
const loading = ref(false) // 表单的加载中

const rule = ref([])

const form = ref({
  id: '',
  outTradeNo: '',
  totalAmount: 0,
  tradeStateCn: '',
  refund: 0
})

let totalAmount = 0

/** 打开弹窗 */
const open = async (id = '') => {
  visible.value = true
  // 修改时,设置数据
  if (id) {
    loading.value = true
    form.value.id = id
    try {
      let val = await Api.getById(id)
      if (val) {
        form.value = val
        rule.value = [
          {
            type: 'input-number',
            field: 'refund',
            title: '退款金额(元)'
          }
        ]
        form.value.refund = val.totalAmount
        totalAmount = val.totalAmount
      }
    } catch (t) {
      console.log(t)
    } finally {
      loading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
</script>
<style>
.tag-purple {
  color: #722ed1;
  background: #f9f0ff;
  border-color: #d3adf7;
}

.tag-pink {
  color: #eb2f96;
  background: #fff0f6;
  border-color: #ffadd2;
}
</style>
